<script lang="ts" setup>
import { IPagination } from '@/api/app';
import { IReader, readerModel } from '@/api/reader/reader';
import { FormConfig } from '@/components/Form/types';
import { useRequest } from '@/hooks/useRequest';
import { NButton, NInput, NPopconfirm, useModal } from 'naive-ui';
import { h, Ref, ref, unref, withModifiers } from 'vue';
import UpgradeForm from './components/upgradeForm.vue';

const searchForm = ref<Pick<IReader, 'identifier' | 'readerName'>>({
  identifier: '',
  readerName: ''
});
const searchConfig: FormConfig<typeof searchForm.value>[] = [
  {
    type: 'component',
    label: '读者编号:',
    component: NInput,
    key: 'identifier',
    span: 8
  },
  {
    type: 'component',
    label: '读者名称:',
    component: NInput,
    key: 'readerName',
    span: 8
  },
  {
    type: 'slot',
    slotName: 'search',
    span: 8
  }
];

const { data, run, loading } = useRequest(readerModel.records, { manual: true });

async function search(pagination: Ref<IPagination>) {
  const { pageNum, pageSize } = pagination.value;
  const params = {
    pageNum,
    pageSize,
    ...unref(searchForm)
  };
  await run(params);
  pagination.value.total = data.value.total;
}

const columns = [
  {
    title: '读者编号',
    key: 'identifier'
  },
  {
    title: '读者名称',
    key: 'readerName'
  },
  {
    title: '备注',
    key: 'remark'
  },
  {
    title: '操作',
    key: 'action',
    width: '80px',
    render(row) {
      return h(
        'div',
        { class: 'flex gap-mini justify-center' },
        {
          default: () => [
            h(
              NButton,
              { type: 'primary', size: 'tiny', onClick: () => createModal(row, '编辑读者') },
              '编辑'
            ),
            h(
              'div',
              { onClick: withModifiers(() => '', ['stop']), class: 'text-0' },
              { default: () => [
                h(
                  NPopconfirm,
                  { onPositiveClick: async () => {
                    await readerModel.del(row.id);
                    _search(1);
                  } },
                  { default: '是否确认删除?', trigger: () => h(NButton, { type: 'error', size: 'tiny' }, '删除') }
                )
              ]}
            )
          ]
        }
      );
    }
  }
];

const readerTable = ref();
function _search(pageNum: number) {
  readerTable.value.search(pageNum);
}

const modal = useModal();
function createModal(row, title) {
  const bookUpgradeModal = modal.create({
    title,
    preset: 'card',
    style: { width: '400px' },
    content: () => h(UpgradeForm, {
      data: row,
      onClose: () => {
        bookUpgradeModal.destroy();
      },
      onSubmit: () => {
        bookUpgradeModal.destroy();
        _search(1);
      }
    })
  });
}
</script>
<template>
  <div class="bg-white min-h-[calc(100vh-124px)] p-normal">
    <Form
      v-model:data="searchForm"
      :config="searchConfig"
    >
      <template #search>
        <div class="flex justify-end gap-mini">
          <NButton type="primary" @click="_search(1)">查询</NButton>
          <NButton type="primary"  @click="createModal({}, '新增读者')">新增</NButton>
        </div>
      </template>
    </Form>
    <Table
      ref="readerTable"
      :loading="loading"
      :data="data?.list"
      :search="search"
      :columns="columns"
    />
  </div>
</template>
